<template>
	<view class="list">
		<petDocInfo :doc="inquiryData.doctor"></petDocInfo>
		<view class="h1">咨询描述</view>
		<view class="desc">
			<view class="pics" v-for="item,index in imgList">
				<image :src="base+item" mode=""></image>
			</view>
			<view class="info">{{inquiryData.question}}</view>
		</view>
		<view class="h1">问答列表</view>
		<view class="ques">
			<view v-if="queList.length==0" class="item center">
				暂无问答记录
			</view>
			<view class="item" v-for="item,index in queList">
				<view v-if="item.fromRole==0">
					<view class="name">用户{{item.fromId}}</view>
					<view class="time">{{item.createTime}}</view>
					<view class="content">提问：{{item.content}}</view>
				</view>
				<view v-else>
					<view class="name">医生：{{item.fromId}}</view>
					<view class="time">{{item.createTime}}</view>
					<view class="content">回复：{{item.content}}</view>
				</view>
			</view>
		</view>
		<view class="h1">追问</view>
		<textarea v-model="question.content" class="ta"></textarea>
		<button type="primary" @tap="reQuestion">发送追问</button>
	</view>

</template>

<script setup>
	import petDocInfo from "@/components/petDocInfo.vue"
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app"
	// 问诊id
    let id=0;
	onLoad((params) => {
		id = params.id		
		getMyQuiry(id)
		questionList(id)
		question.value.inquiryId=id;

	})
	const inquiryData = ref({})
	let base = uni.$base_url
	const imgList = ref([])
	
	// 获取我的问诊,然后根据id筛选指定的问诊信息
	async function getMyQuiry(id) {
		let res = await uni.$get("/prod-api/api/pet-hospital/inquiry/my-list")
		console.log(res)
		inquiryData.value = res.rows.filter((item => {
			return item.id == id
		}))[0]
		console.log(inquiryData.value)
		imgList.value = inquiryData.value.imageUrls.split(",")
		console.log(imgList.value)
	}
	const queList = ref([])
	
	// 获取问诊的问题列表
	async function questionList(id) {
		let {
			rows
		} = await uni.$get("/prod-api/api/pet-hospital/inquiry-message/list", {
			"inquiryId": id,
		})
		queList.value = rows
	}
	// 
	const question=ref({
		"inquiryId":0,
		"content":""
	})
	async function reQuestion()
	{
		console.log("question")
		if(question.value.content=="")
		{
			console.log("none");	
			uni.showToast({
				icon:"error",
				title:"请输入追问的问题"
			})
			return;
		}
		let res= await  uni.$post("/prod-api/api/pet-hospital/inquiry-message",question.value)
		
		if(res.code==200)
		{
			questionList(id)
			question.value.content=""
		}
		
		
	}
</script>

<style lang="scss">
	.list {
		.desc {
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;

			image {
				width: 200rpx;
				height: 200rpx;
				border: 1px solid #ccc;
			}

			.info {
				width: 500rpx;
				font-size: 26rpx;
			}
		}

		.ques {
			.item {
				border: 1px solid #ccc;
				border-radius: 5px;
				box-shadow: 3px 3px 3xp #ccc;
				margin: 5px;
				padding: 5px;
				font-size: 26rpx;

				.name {
					color: #1b91ff;
					font-size: 28rpx;
					font-weight: bold;
				}

				.time {
					font-size: 26rpx;
					color: #666;
				}
			}

			.center {
				height: 50px;
				line-height: 50px;
				text-align: center;

			}
		}

		.ta {
			border: 1px solid #ccc;
			width: 95%;
			height: 200rpx;
			margin: 10px auto;

		}
		button{
			margin: 10px;
		}
	}
</style>